<template>
  <div class="left-zp">
    <div class="turntable">
      <div class="border-1">
        <div class="border-2">
          <div class="border-3">
            <div class="center-d"></div>

            <div class="app-list">
              <template v-for="(item, key) in applicationList" :key="key">
                <div
                  class="app-item"
                  :class="{ ['active']: index === (key + 1) }"
                  :style="{ transform: 'rotate(' + (key * 360 / applicationList.length) + 'deg)' }"
                  @click="changeIndex(key + 1)"
                >
                  <el-image class="app-img" :src="item.icon ? item.icon : ''" fit="cover">
                    <template #error>
                      <div class="image-slot">
                        <el-icon><picture-filled /></el-icon>
                      </div>
                    </template>
                  </el-image>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="sysDoc">
      <h1 class="title">MES</h1>
      <h2 class="title">{{ showText.title }}</h2>
      <div class="content">{{ showText.content }}</div>
      <div class="img-list">
        <el-image
          v-for="(item, index) in showText.imgs"
          :style="'width: ' + (100 - ((showText.imgs.length - 1) * 20)) + '%; height: 100%;cursor: pointer;position: absolute;top: 0px;left:' + index * (showText.imgs.length >= 3 ? 10 : 20) + '%;'"
          :src="item"
          fit="fill"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ApplicationVO } from "@/api/system/application/types";
import { getSystemInfos } from '@/api/login';

const timerId = ref();
const index = ref(0);
const applicationList = ref<ApplicationVO[]>([]);
const showText = ref({
  title: '',
  content: '',
  imgs: [] as any
});
const platformData: any = ref()
const getApplicationList = async () => {
  const res = await getSystemInfos();
  platformData.value = res.data[0]
  applicationList.value = res.data.slice(1);
  showDoc(index.value);
  getTimer();
}

/** 显示系统说明 */
const showDoc = (index: number) => {
  if (index === 0) {
    showText.value = {
      title: '',
      content: '',
      imgs: [platformData.value.pictures.split(",")]
    }
  } else {
    showText.value = {
      title: applicationList.value[index - 1].name,
      content: applicationList.value[index - 1].remark,
      imgs: applicationList.value[index - 1].pictures.split(",")
    }
  }
};

/** 点击系统说明,重置定时器 */
const changeIndex = (currIndex: number) => {
  clearInterval(timerId.value);
  index.value = currIndex;
  showDoc(currIndex);
  getTimer();
};

const getTimer = () => {
  timerId.value = setInterval(() => {
    if (index.value >= applicationList.value.length) {
      index.value = 0;
    } else {
      index.value += 1
    }
    showDoc(index.value);
  }, 3000);
}

onMounted(() => {
  getApplicationList();
});

onBeforeUnmount(() => {
  clearInterval(timerId.value);
});
</script>

<style lang="scss" scoped>
.left-zp {
  width: calc(100vw - 550px);
  height: 100%;
  margin-left: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-start;

  .sysDoc {
    flex: 1;
    margin-left: 100px;
    text-align: center;

    .title {
      margin-bottom: 10px;
      color: #FFFFFF;
    }

    .content {
      font-size: 15px;
      color: #FFFFFF;
      margin-bottom: 20px;
    }

    .img-list {
      position: relative;
      width: 100%;
      height: 40vh;

      :deep(.el-image) {
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.5);
      }
    }
  }

  .app-img {
    border-radius: 5px;
    width: 35px;
    height: 35px;
  }

  .turntable {

    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20px;

    .border-1 {
      width: calc(50vh - 20px);
      height: calc(50vh - 20px);
      border: 4px dashed rgba(255, 255, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .border-2 {
        width: calc(50vh - 20px);
        height: calc(50vh - 20px);
        background: url("@/assets/images/aa.png") 38% 27% no-repeat;
        background-size: 103% 106%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .border-3 {
          border: 5px solid rgba(255, 255, 255, 0.7);
          width: 50px;
          height: 50px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          .center-d {
            background-color: #529b2e;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            position: absolute;
            z-index: 111;
          }

          .app-list {
            position: absolute;
            width: 100%;
            height: 50px;

            .app-item {
              border-bottom-left-radius: 20px;
              border-top-left-radius: 20px;
              position: absolute;
              width: calc(25vh + 60px);
              height: 100%;
              transform-origin: 20px 25px;
              align-items: center;
              justify-content: flex-end;
              display: flex;
              background-color: rgba(255, 255, 255, 0);
              font-size: 35px;
              color: #a0cfff;
              cursor: pointer;
            }

            .active {
              background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%);
              color: #409EFF;
            }
          }
        }
      }
    }
  }
}
</style>
